<template>
  <el-table 
    :data="tableData" 
    style="width: 100%"
  >
    <!-- 遍历列配置，渲染每一列 -->
    <el-table-column 
      v-for="(colConfig, index) in tableHead" 
      :key="index"
      :label="colConfig.label"
      :width="colConfig.width"
      align="center"
    >
      <!-- 单元格内容模板 -->
      <template #default="scope">
        <!-- 情况1：如果列配置有格式化函数，优先使用格式化后的值 -->
        <template v-if="colConfig.format">
          {{ colConfig.format(scope.row) }}
        </template>
        
        <!-- 情况2：如果是"充值/扣减明细"列，渲染可点击的"查看"链接 -->
        <template v-else-if="colConfig.clickFinanceDetail">
          <a 
            type="text" 
            class="link-text"
            @click.stop="handleCellClick(scope.row, 'financeDetail')"
          >
            查看
          </a>
        </template>
        
        <!-- 情况3：默认显示字段值 -->
        <template v-else>
          {{ scope.row[colConfig.prop] }}
        </template>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>

// 定义接收的参数（父组件传递过来的）
const props = defineProps({
  // 表格列配置（必填）
  tableHead: {
    type: Array,
    required: true,
    description: '表格列的配置数组，包含每列的label、prop、交互属性等'
  },
  // 表格数据（必填）
  tableData: {
    type: Array,
    required: true,
    description: '表格的数据源，数组中的每个对象代表一行数据'
  }
});

// 定义要发射的事件（传递给父组件）
const emit = defineEmits([
  'clickFirst'  // 统一的点击事件，传递行数据和操作类型
]);

/**
 * 处理单元格点击事件
 * @param {Object} row - 当前点击行的完整数据
 * @param {String} actionType - 操作类型标识（如'financeDetail'）
 */
const handleCellClick = (row, actionType) => {
  // 向父组件发射事件，传递关键信息
  emit('clickFirst', row, actionType);
};
</script>

<style scoped>
.link-text {
  color: #409eff; /* 蓝色文字，模拟链接样式 */
  cursor: pointer;
}
.link-text:hover {
  text-decoration: underline;
}
</style>